<script setup lang='ts'>
import { ref } from 'vue';
import { getMenuListReq ,editMenuLReq ,delMenuLReq } from '../../api/menu/menu';
import CustomTable from '../../components/customTable/customTable.vue';

import MenuDialog from './components/dialog.vue';

// 默认请求列表数据
const pagination =ref({
  pageNo: 1,
  pageSize: 10,
  total: 0,
})

// 编辑新增开关  true新增 | false编辑
const addIsEditSwitch = ref(true);

// 菜单表头信息
const columns = [
  {
    label: "菜单名称",
    prop: "menuName"
  },
  {
    label: "组件路径",
    prop: "path"
  },
  {
    label: "等级",
    prop: "level"
  },
  {
    label: "操作",
    width: "200",
    slot: "operation"
  },
];

const MenuDialogRef = ref();
const menuList = ref([]);

// 获取菜单列表
const getMenuList = async ()=> {
//  const res = await getMenuListReq(pagination)
//  const { list, total } = res.data
//   menuList.value= list;
//   pagination.value.total= total;
}

getMenuList()

// 新增菜单
const addMenu = () => {
  addIsEditSwitch.value = true;
  MenuDialogRef.value.handleOpen();
}

// 编辑菜单
const editMenu = async (row: any) => {
  MenuDialogRef.value.handleOpen(row);
  addIsEditSwitch.value = false;
  // const {isStatus,path,level,menuName,} = row;
  const res = await editMenuLReq({})
  // console.log(row);
}

// 删除菜单
const delMenu = (row: any) => {
  
}

</script>

<template>
  <div class="menu">
    <CustomTable
      :data="menuList"
      :columns="columns"
      :pagination="pagination"
    >
      <template #operation={row}>
        <el-button @click="addMenu()" type="default" size="small">新增</el-button>
        <el-button @click="editMenu(row)" type="primary" size="small">编辑</el-button>
        <el-button @click="delMenu(row)" type="danger" size="small">删除</el-button>
      </template>
    </CustomTable>

    <!-- 菜单新增对话框 -->
    <MenuDialog 
      ref="MenuDialogRef" 
      :addIsEditSwitch="addIsEditSwitch"
      @editItemData="getMenuList"
    />
  </div>
</template>

<style scoped lang="scss">

</style>